<template>
    <el-container>
        <el-aside class="album-slide">
            <el-image class="album-img" fit="contain" :src="attachImageUrl(songDetails.pic)" />
            <h3 class="album-info">{{ songDetails.title }}</h3>
        </el-aside>

        <el-main class="album-main">
            <h1>简介</h1>
            <p>{{ songDetails.introduction }}</p>
            <!--评分-->
            <div class="album-score">
                <div>
                    <h3>歌单评分</h3>
                    <el-rate v-model="rank" allow-half disabled></el-rate>
                </div>
                <span>{{ rank * 2 }}</span>
                <div>
                    <h3>{{ assistText }} {{ score * 2 }}</h3>
                    <el-rate allow-half v-model="score" :disabled="disabledRank" @click="pushValue()"></el-rate>
                </div>
            </div>
            <!--歌曲-->
            <song-list class="album-body" :songList="currentSongList"></song-list>
            <!-- 评论组件 -->
            <comment :playId="songListId" :type="1"></comment> 
        </el-main>
    </el-container>
</template>
  
<script setup lang="ts">
import { ref, computed } from "vue";
import { useStore } from "vuex";
import mixin from "@/mixins/mixin";
import SongList from "@/components/SongList.vue";
import Comment from "@/components/Comment.vue";
import { HttpManager } from "@/api";
import { ElMessage } from 'element-plus';

const store = useStore();
const { checkStatus } = mixin();

const currentSongList = ref([]); // 存放的音乐
const nowSongListId = ref(""); // 歌单 ID
const nowScore = ref(0);
const nowRank = ref(0);
const disabledRank = ref(false);
const assistText = ref("评价");
const songDetails = computed(() => store.getters.songDetails); // 单个歌单信息
const nowUserId = computed(() => store.getters.userId);

nowSongListId.value = songDetails.value.id; // 给歌单ID赋值

// 提交评分
async function pushValue() {
    if (disabledRank.value || !checkStatus()) return;

    const songListId = nowSongListId.value;
    const consumerId = nowUserId.value;
    const score = nowScore.value * 2;

    try {
        const result = (await HttpManager.setRank({ songListId, consumerId, score })) as ResponseBody;
        ElMessage({
            message: result.message,
            type: result.type as any,
        });

        if (result.success) {
            getRank(nowSongListId.value);
            disabledRank.value = true;
            assistText.value = "已评价";
        }
    } catch (error) {
        console.error(error);
    }
}

// 获取评分
async function getRank(id) {
    const result = (await HttpManager.getRankOfSongListId(id)) as ResponseBody;
    nowRank.value = result.data / 2;
}
// 获取用户评分
async function getUserRank(userId, songListId) {
    if (userId == '' || songListId == '') {
        nowScore.value = 0;
        return;
    }
    const result = (await HttpManager.getUserRank(userId, songListId)) as ResponseBody;
    if (result.data) {//如果已评价，则显示评分
        nowScore.value = result.data / 2;
        disabledRank.value = true;
        assistText.value = "已评价";
    }
}

//获取歌单中所有歌曲，然后遍历集合中的元素，获取歌曲id，再根据歌曲ID获取歌曲详情。
async function getSongId(id) {
  const result = (await HttpManager.getListSongOfSongId(id)) as ResponseBody;
  currentSongList.value = result.data;
}

// 模板中使用的重命名变量
const rank = nowRank;
const score = nowScore;
const attachImageUrl = HttpManager.attachImageUrl;
const songListId = nowSongListId;

// 初始化函数调用
getUserRank(nowUserId.value, nowSongListId.value); // 获取用户评分
getRank(nowSongListId.value); // 获取评分
// 获取歌单里面的歌曲ID（页面初始化时调用）
getSongId(nowSongListId.value); 
</script>
<style lang="scss" scoped>
// 使用Sass 3.0新模块系统导入
@use "@/assets/css/var" as *;

.album-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;

    .album-img {
        height: 250px;
        width: 250px;
        border-radius: 10%;
    }

    .album-info {
        width: 70%;
        padding-top: 2rem;
    }
}

.album-main {
    h1 {
        font-size: 22px;
    }

    p {
        color: rgba(0, 0, 0, 0.5);
        margin: 10px 0 20px 0px;
    }

    /*歌单打分*/
    .album-score {
        display: flex;
        align-items: center;
        margin: 1vw;

        h3 {
            margin: 10px 0;
        }

        span {
            font-size: 60px;
        }

        &>div:last-child {
            margin-left: 10%;
        }
    }

    .album-body {
        margin: 20px 0 20px 0px;
    }
}

@media screen and (min-width: $sm) {
    .album-slide {
        position: fixed;
        width: 400px;
    }

    .album-main {
        min-width: 600px;
        padding-right: 10vw;
        margin-left: 400px;
    }
}

@media screen and (max-width: $sm) {
    .album-slide {
        display: none;
    }
}</style>